<template>
    <div class="system-role-container-personal-index">

        <el-card shadow="hover" class="mb10  ">
            <div class="system-user-search-personal-index">
                <div>
                    <el-form :model="param" label-width="150px">

                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="学号：">
                                <el-input size="small" placeholder="请输入学号" v-model="param.xh"
                                    style="width: 215px">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="姓名：">
                                <el-input size="small" placeholder="请输入姓名" v-model="param.xm"
                                    style="width: 215px" class="ml10">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="身份证号：">
                                <el-input size="small" placeholder="请输入身份证号" v-model="param.sfzh"
                                    style="width: 215px" class="ml10">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="院校代码：">
                                <el-input size="small" placeholder="请输入院校代码" v-model="param.yxdm"
                                    style="width: 215px" class="ml10">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">

                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">

                        </el-col>



                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="学历层次：">
                                <el-select v-model="param.cc" placeholder="请选择学历层次" size="small"
                                    style="width: 215px" >
                                    <el-option label="研究生" value="1"></el-option>
                                    <el-option label="普通本科" value="2"></el-option>
                                    <el-option label="普通专科" value="3"></el-option>
                                    <el-option label="成人本科" value="4"></el-option>
                                    <el-option label="成人专科" value="5"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="学历类别：">
                                <el-select v-model="param.xxxs" placeholder="请选择学历层次" size="small"
                                    style="width: 215px"   class="ml10">
                                    <el-option label="科研单位" value="1"></el-option>
                                    <el-option label="普通高校" value="2"></el-option>
                                    <el-option label="成人高校" value="3"></el-option>
                                    <el-option label="电视大学" value="4"></el-option>
                                    <el-option label="网络教育" value="5"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>


                    </el-form>
                </div>
                <div style="display: flex;justify-content: end;">
                    <el-button class="ml10 btn_bgc" type="primary" @click="search"> 查询</el-button>
                    <el-button class="ml10" @click="searchClear">重置 </el-button>
                    <el-button size="small" type="success" class="ml10" @click="onOpenimportRole">
                        <el-icon>
                            <elementFolderAdd />
                        </el-icon>
                        导入查询
                    </el-button>


                </div>
            </div>
        </el-card>


        <el-card shadow="hover">
          <template #header>
            <div style="display: flex; justify-content: end">
              <el-button style="margin: 10px 0; transform: translateX(2px);" size="small" type="success" @click="onOpenAddRole">
                <el-icon>
                  <elementFolderAdd />
                </el-icon>
                批量上传照片
              </el-button>
            </div>

          </template>
            <el-table
                    :data="tableData.data"
                    height="calc(100vh - 180px )"
                    style="width: 100%"
                    :header-cell-style="{ background: '#EEEEEE', }"
            >
                <el-table-column prop="xh" label="学号" width="180" align="center"></el-table-column>
                <el-table-column prop="xm" label="姓名" align="center"></el-table-column>
                <el-table-column prop="yxdm" label="学院代码" align="center"></el-table-column>
                <el-table-column prop="sfzh" label="身份证号" width="180" align="center"> </el-table-column>
                <el-table-column prop="cc" label="学历层次" align="center">
                            <template #default="scope">
                                <span type="success" v-if="scope.row.cc===1">研究生</span>
                                <span type="success" v-if="scope.row.cc===2">普通本科</span>
                                <span type="success" v-if="scope.row.cc===3">普通专科</span>
                                <span type="success" v-if="scope.row.cc===4">成人本科</span>
                                <span type="success" v-if="scope.row.cc===5">成人专科</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="xxxs" label="学历类别" align="center">
                            <template #default="scope">
                                <span type="success" v-if="scope.row.xxxs===1">科研单位</span>
                                <span type="success" v-if="scope.row.xxxs===2">普通高校</span>
                                <span type="success" v-if="scope.row.xxxs===3">成人高校</span>
                                <span type="success" v-if="scope.row.xxxs===4">电视大学</span>
                                <span type="success" v-if="scope.row.xxxs===5">网络教育</span>
                            </template>
                        </el-table-column>
                <el-table-column prop="yxdm" label="院系代码" align="center"></el-table-column>
                <el-table-column prop="yxmc" label="学校名称" align="center"></el-table-column>
                <el-table-column prop="zpxzcs" label="照片下载次数" align="center"></el-table-column>
                <el-table-column prop="code" align="center" label="操作" width="180">
                <template #default="scope" >
                    <el-button v-if="scope.row.picurl" size="mini" type="primary" @click="lookPic(scope.row)">查看照片</el-button>
                    <el-button size="mini" type="success" @click="lookDtail(scope.row)">详情</el-button>
                </template>
            </el-table-column>

            </el-table>
            <el-pagination v-if="pageShow" @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
                :pager-count="5" :page-sizes="[15, 35, 45]" v-model:current-page="param.current" background
                v-model:page-size="param.size" layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.total">
            </el-pagination>
        </el-card>
        <AddRole ref="addRoleRef"/>
        <EditRole ref="editRoleRef" />
        <ImportRole ref="importRoleRef" @update="add"/>
        <LookDatile ref="lookRoleRef" />
        <!-- 表格弹出照片 -->
        <el-dialog title  v-model="imgViewDialogVisible" class="imgView-dialog" >
            <div class="main" style="text-align: center">
                <el-image :src="imgViewDialog_imgSrc" :width="boxWidth" style="width: 50%; height: 50%;"></el-image>
<!--                <img class="img" width="100%" :src="imgViewDialog_imgSrc" />-->
            </div>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import AddRole from './component/addRole.vue';
import EditRole from './component/editRole.vue';
import ImportRole from './component/importRole.vue';
import LookDatile from './component/lookDatile.vue'
import {xuejiGet,getImageUrl,uploadYxdmXh} from  '../../api/personal/index'
import {userAdd} from "/@/api/home";
export default {
    name: 'studentIndex',
    components: { AddRole, EditRole , ImportRole,LookDatile},
    setup() {
        const addRoleRef = ref();
        const editRoleRef = ref();
        const importRoleRef = ref();
        const lookRoleRef = ref();
        const state: any = reactive({
            pageShow:true,
            tableData: {
                data: [],
                total: 0,
                loading: false,
            },
            param: {
                yxdm: '',//院校代码
                cc: '',//学历层次
                xxxs: '',//学院类别
                xh: '',//学号
                xm: '',//姓名
                sfzh: '',//身份证号
                current:1,
                size:15
            },
            pageSize:'',
            pageNum:'',
            imgViewDialogVisible:false,   //控制照片大图
            imgViewDialog_imgSrc:'',
        });
        // 初始化表格数据
        const initTableData = async() => {
            const res=await xuejiGet(state.param)
            state.tableData.data = res.data.records;
            state.tableData.total = res.data.total;
        };
        const add =  async(oldRow:any) => {
            console.log(oldRow,'11111111111')
            const res = await uploadYxdmXh(oldRow);
            if (res.code === 200) {
                console.log(res)
                state.tableData.data = res.data;
                ElMessage.success('导入成功');
                state.pageShow = false,
                importRoleRef.value.closeDialog();

            }
        };
        //查看详情
        const lookDtail = (row:any)=>{
            lookRoleRef.value.openDialog(row);
        }
        // 打开批量上传弹窗
        const onOpenAddRole = () => {
            addRoleRef.value.openDialog();
        };
        // 打开比对结果弹窗
        const onOpenEditRole = (row: Object) => {
            editRoleRef.value.openDialog(row);
        };
        //打开导入接口
        const onOpenimportRole = ()=>{
            importRoleRef.value.openDialog();
        }
        //弹出弹出框照片
        const lookPic =(row:any)=>{
            state.imgViewDialogVisible = true
            // state.imgViewDialog_imgSrc = row.zp
            const params = {
                imageUrl:row.picurl
            }
            getImageUrl(params).then((res:any)=>{
                console.log('=====>',res.data)
                state.imgViewDialog_imgSrc = res.data
                // window.open(res.url);
            })
        }
        // 删除角色
        const onRowDel = (row: Object) => {
            ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.roleName}”，是否继续?`, '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    ElMessage.success('删除成功');
                })
                .catch(() => { });
        };
        // 分页改变
        const onHandleSizeChange = (val: number) => {
            state.pageSize = val;
            initTableData()
        };
        // 分页改变
        const onHandleCurrentChange = (val: number) => {
            state.pageNum = val;
            initTableData()
        };
        //查询
        const search=async()=>{
            const res= await xuejiGet(state.param)
            console.log(res)
            state.tableData.data = res.data.records;
            state.tableData.total = res.data.total;
        }
        const searchClear=async()=>{
            state.param={}
            const res=await xuejiGet(state.param)
            state.tableData.data = res.data.records;
            state.tableData.total = res.data.total;
            state.param.size =15
            console.log(res)
        }
        // 页面加载时
        onMounted(() => {

            initTableData();
        });
        return {
            addRoleRef,
            editRoleRef,
            importRoleRef,
            lookPic,
            lookRoleRef,
            lookDtail,
            add,
            onOpenAddRole,
            onOpenimportRole,
            onOpenEditRole,
            onRowDel,
            onHandleSizeChange,
            onHandleCurrentChange,
            search,
            searchClear,
            ...toRefs(state),
        };
    },
};
</script>

<style lang="scss">
.system-role-container-personal-index {
  .el-card__header {
    height: auto!important;
    min-height: 45px!important;
  }
}
.system-user-search-personal-index {
    display: flex;
    flex-direction: column;
    .btn_bgc {
        background: #D84436;
        border: none;

    }

}

.system-more {
    display: flex;
    flex-direction: row;
    justify-content: end;
}
</style>
